<template>
  <div class="left-components-list left-scroll">
    <el-select
      v-model="processValue"
      filterable
      class="width240"
      placeholder="引用表单设置"
      size="small"
      @change="changePorcess">
      <el-option
        v-for="item in processList"
        :key="item.id"
        :label="item.name"
        :value="item.id"
        style="max-width: 200px !important;" />
    </el-select>
    <div v-for="(item, index) in list" :key="index" class="widget-item">
      <Title :title="item.name" class="widget-cate" />
      <draggable
        v-model="item.config"
        :group="{ name: 'formMake', pull: 'clone', put: false }"
        :sort="false"
        :move="handelMove"
        tag="ul"
        ghost-class="ghost"
        class="widget-left-components"
        item-key="name"
      >
        <div v-for="(element ,index) in item.config" :key="index" class="form-edit-widget-label">{{ element.name }}</div>
      </draggable>
    </div>
  </div>
</template>

<script>
import { basicComponents, advanceComponents, systemComponents } from './config';
import draggable from 'vuedraggable';
import LimitMove from '@/views/legal/process/components/formMake/components/mixins/limitMove';
import Title from '@/components/Title';

export default {
  name: 'FormMakeLeft',
  components: { draggable, Title },
  mixins: [LimitMove],
  props: {
    processList: { // 流程列表
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      list: [
        { name: '基础字段', config: basicComponents },
        { name: '增强字段', config: advanceComponents },
        { name: '系统字段', config: systemComponents }
      ],
      processValue: ''
    };
  },
  created() {
  },
  methods: {
    changePorcess(val) {
      this.$emit('quoteProcess', val);
    }
  }
};
</script>

<style lang="scss" scoped>
@import './components/mixins/style.scss';
.left-components-list {
  height: 100%;
  flex-shrink: 0;
  padding: 24px;
  width: 270px;
  z-index: 1;
  box-shadow: 5px 0px 6px 0px rgba(240,242,245,0.81);
  .widget-cate {
    margin-bottom: 6px;
  }
  .widget-item {
    margin-bottom: 26px;
  }
   ul {
    position: relative;
    overflow: hidden;
    padding: 0px;
    margin: 0;
  }
  .form-edit-widget-label {
    font-size: 14px;
    display: block;
    text-align: center;
    width: 96px;
    line-height: 29px;
    position: relative;
    float: left;
    left: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
    cursor: move;
    border: 1px solid #edeef2;
    background: #edeef2;
    margin: 6px 0;
    border-radius: 2px;
    &:hover {
      color: #406eff;
      border: 1px dashed #406eff;
    }
    &:nth-child(odd) {
      margin-right: 6px;
    }
    &:nth-child(even) {
      margin-left: 6px;
    }
  }
  .el-select {
    margin-bottom: 16px;
  }
}
.left-scroll {
  @include scrollBar($x: hidden, $y: auto, $width: 6px);
}
.width200 {
  width: 200px;
  &::v-deep {
    .el-input__inner {
      width: 200px;
    }
  }
}
</style>
